<template>
    <el-container>
        <el-header style="background-color: aqua;">

            <el-row>
                <el-col :span="4">
                    <img src="../assets/logo.png">
                </el-col>

                <el-col :span="16">
                    <div style="font-size: 30px; margin-top: 8px;text-align: center; ">
                        <h3>智慧云停车管理系统</h3>
                    </div>
                </el-col>

                <div v-if="user.userName == null">
                    <el-col :span="2" :offset="2" style="margin-top: 8px;">
                        <el-button @click="login">请登录</el-button>
                    </el-col>
                </div>

                <div v-if="user.userName != null">
                    <el-col :span="2" :offset="2" style="margin-top: 8px; ">
                        <el-upload class="avatar-uploader" action="api/user/imgLoad">
                            <img v-if="imgSrc" :src="imgSrc" class="avatar-img" />
                            <div v-else class="avatar-placeholder">
                                <i class="el-icon-plus avatar-icon"></i>
                            </div>
                        </el-upload>
                    </el-col>
                    <el-col :span="2" style="margin-top: 8px; font-size: 22px;">
                        <span>欢迎: {{ user.userName }}</span>
                    </el-col>
                </div>

            </el-row>

        </el-header>

        <el-container>

            <el-aside width="200px">
                <el-menu default-active="2">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-location"></i><span>导航一</span></template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>

    </el-container>
</template>

<script>
export default {
    data() {
        return {
            login: '',
            user: {},
            imgSrc: '',
        }
    },

    methods: {
    },
}
</script>

<style scoped>
#app {
    width: 100%;
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

img {
    width: 180px;
    height: 60px;
}

h3 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-family: 'Lobster', cursive;
}

.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    overflow: hidden;
    width: 50px;
    /* 根据需要调整大小 */
    height: 50px;
    /* 根据需要调整大小 */
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-uploader:hover {
    border-color: #409EFF;
}

.avatar-img {
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8c939d;
    font-size: 24px;
}

.avatar-icon {
    cursor: pointer
}
</style>